<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期学习</title>
    <!--    react 核心库-->
    <script type="text/javascript" src="./yl/react.development.js"></script>
    <!--    用于支持react操作dom-->
    <script type="text/javascript" src="./yl/react-dom.development.js"></script>
    <!--    用于将jsx 转为 js-->
    <script type="text/javascript" src="./yl/babel.min.js"></script>
    <!--    用于对组件标签进行限制-->
    <script type="text/javascript" src="./yl/prop-types.js"></script>

</head>
<body>

<div id="app"></div>
<script type="text/babel">
    class Person extends React.Component {
        //在生命周期中，类的构造函数 constructor() 会率先被执行，用于初始化组件的状态、接收外部传递进来的数据、绑定成员方法的 this 指向等工作。（只执行一次）
        constructor(props) {
            super(props);
        }
        // 会运行在 render() 之前，它是渲染之前的回调函数。不过，由于在这个方法中执行的任务都能提前到 constructor() 中，因此实际项目中很少会用到它。（只执行一次）
        componentWillMount(){

        }
        //render()：是在定义组件时必须声明的方法，它是一个无副作用的纯函数，
        // 可根据组件的 props和 state 得到一个React 元素、null 或 false 等返回值，
        // 并且在 render() 方法中不能调用改变组件状态的 this.setState() 方法。
        // 注意，将元素渲染到页面 DOM 中的工作都由 React 负责，而不是 render() 方法
        render() {
            return (
                <div>
                    <h1>生命周期学习</h1>
                    <button onClick={this.unload}>卸载</button>
                </div>
            )
        }

        //挂载完成后执行
        // 会运行在 render() 之后，它是渲染之后的回调函数。此时组件已被挂载到页面中，可以执行 DOM 相关的操作，例如异步读取服务器中的数据并填充到组件中、调用 jQuery 代码等。（只执行一次）
        componentDidMount() {
            console.log('-----------------------------')
        }

        //更新时回调
        componentDidUpdate(prevProps, prevState, snapshot) {

        }

        //做一些收尾工作，组件在卸载前调用
        componentWillUnmount() {

        }



        unload = () => {
            ReactDOM.unmountComponentAtNode(document.getElementById('app'))
        }
    }
    ReactDOM.render(< Person/>, document.getElementById('app'))
</script>
</body>
</html>
